<template>

      <tiny-form :model="checkForm" ref="ruleForms" :rules="rules">
        <tiny-row :gutter="22">
          <tiny-col :span="22">
            <tiny-form-item label="取值地址url" prop="url">
              <tiny-input
                v-model="checkForm.url"
                placeholder="取值地址url"
                autocomplete
              ></tiny-input>
            </tiny-form-item>
          </tiny-col>
        </tiny-row>
        <tiny-row :gutter="22">
          <tiny-col :span="20">
            <tiny-form-item label="取值规则" prop="ruleStr">
              <tiny-input
                v-model="checkForm.ruleStr"
                placeholder="取值规则"
                autocomplete
              ></tiny-input>
            </tiny-form-item>
          </tiny-col>
          <tiny-col :span="2">
            <tiny-form-item>
              <tiny-button type="primary" @click="checkRule">取值</tiny-button>
            </tiny-form-item>
          </tiny-col>
        </tiny-row>
      </tiny-form>
      <div>
        <span>取值</span>
        <div class="info-box">
          <div v-html="showValue"></div>
        </div>
      </div>
</template>

<script setup>
import { ref, getCurrentInstance, toRefs } from 'vue';
const { proxy } = getCurrentInstance();
const ruleForms = ref(null);
const props = defineProps({
  ruleCheck: {
    type: Object,
    default: () => ({
      show: false,
    }),
  },
});
const checkForm = ref({ ruleName: '' });
const showValue = ref();
const rules = ref({
  url: [{ required: true, message: '请输入取值地址url', trigger: 'blur' }],
  ruleStr: [{ required: true, message: '请输入取值规则', trigger: 'blur' }],
});
const checkRule = async () => {
  ruleForms.value.validate(valid => {
    if (valid) {
      proxy.$api.rule.checkBookRule(checkForm.value).then(res => {
        showValue.value = res.checkValue;
      });
    }
  });
};
</script>

<style>
.info-box {
  width: 100%;
  height: 500px;
  background: beige;
  overflow-x: auto;
  overflow-y: auto;
}
</style>
